<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%String path = request.getContextPath();%>
<!DOCTYPE html>
<html>
<head>
  <title>OOChat | 登陆</title>
  <script src="<%=path%>/static/source/js/jquery-1.9.0.min.js"></script>
  <script src="<%=path%>/static/source/js/login.js"></script>
  <link href="<%=path%>/static/source/css/login2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>登录注册</h1>

<div class="login" style="margin-top:50px;">
    
    <div class="header">
        <div class="switch" id="switch"><a class="switch_btn_focus" id="switch_qlogin" href="javascript:void(0);" tabindex="7">快速登录</a>
			<a class="switch_btn" id="switch_login" href="javascript:void(0);" tabindex="8">快速注册</a><div class="switch_bottom" id="switch_bottom" style="position: absolute; width: 64px; left: 0px;"></div>
        </div>
    </div>    
  
    
    <div class="web_qr_login" id="web_qr_login" style="display: block; height: 235px;">    

            <!--登录-->
            <div class="web_login" id="web_login">
               
               
               <div class="login-box">
    
            
			<div class="login_form">
				<form action="<%=path%>/user/login" name="loginform" onsubmit="return checkLoginForm()" accept-charset="utf-8" id="login-form" class="loginForm" method="post"><input type="hidden" name="did" value="0"/>
               <input type="hidden" name="to" value="log"/>
                <div class="uinArea" id="uinArea">
                <label class="input-tips" for="u">帐号：</label>
                <div class="inputOuter" id="uArea">
                    
                    <input type="text" id="username" name="userid" class="inputstyle" placeholder="请输入账号"/>
                </div>
                </div>
                <div class="pwdArea" id="pwdArea">
               <label class="input-tips" for="p">密码：</label> 
               <div class="inputOuter" id="pArea">
                    
                    <input type="password" id="password" name="password" class="inputstyle" placeholder="请输入密码"/>
                </div>
                </div>
               
                <div style="padding-left:50px;margin-top:20px;"><input type="submit" id="submit" value="登 录" style="width:150px;" class="button_blue"/></div>
              </form>
           </div>
           
            	</div>
               
            </div>
            <!--登录end-->
  </div>

  <!--注册-->
    <div class="qlogin" id="qlogin" style="display: none; ">
   
    <div class="web_login"><form name="form2" id="regUser" accept-charset="utf-8"    action="<%=path%>/user/logging" method="post">
	      <input type="hidden" name="to" value="reg"/>
		      		       <input type="hidden" name="did" value="0"/>
        <ul class="reg_form" id="reg-ul">
                <li>
                	
                    <label for="user"  class="input-tips2">你的账号:</label>
                    <div class="inputOuter2">
                        <input type="text" id="user" name="userid" maxlength="16" class="inputstyle2"/>
                    </div>
                    
                </li>
                
                <li>
                	
                    <label for="user"  class="input-tips2">你的密码:</label>
                    <div class="inputOuter2">
                        <input type="password" id="user" name="password" maxlength="16" class="inputstyle2"/>
                    </div>
                    
                </li>
                
                <li>
                	
                    <label for="user"  class="input-tips2">你的名字:</label>
                    <div class="inputOuter2">
                        <input type="text" id="user" name="nickname" maxlength="16" class="inputstyle2"/>
                    </div>
                    
                </li>
                
                <li>
                	
                    <label for="user"  class="input-tips2">你的年龄:</label>
                    <div class="inputOuter2">
                        <input type="text" id="user" name="age" maxlength="16" class="inputstyle2"/>
                    </div>
                    
                </li>
                
                <li>
                	
                    <label for="user"  class="input-tips2">个性签名:</label>
                    <div class="inputOuter2">
                        <input type="text" id="user" name="profile"  class="inputstyle2"/>
                    </div>
                    
                </li>
                
                
                <li>
                    <div class="inputArea">
                        <input type="submit" id="submit2"  style="margin-top:10px;margin-left:85px;" class="button_blue" value="同意协议并注册"/> <a href="#" class="zcxy" target="_blank">注册协议</a>
                    </div>
                    
                </li>
            </ul></form>
           
    </div>
   
    
    </div>
    <!--注册end-->
</div>
<div class="jianyi">© 2018 OOChat.</div>

<script>

  $(function(){
    <c:if test="${not empty param.timeout}">
      layer.msg('连接超时,请重新登陆!', {
        offset: 0,
        shift: 6
      });
    </c:if>

    if("${error}"){
      $('#submit').attr('value',"${error}").css('background','red');
      $('#submit2').attr('value',"${error}").css('background','red');
    }

    if("${message}"){
      layer.msg('${message}', {
        offset: 0,
      });
    }

    $('.close').on('click', function(c){
      $('.login-form').fadeOut('slow', function(c){
        $('.login-form').remove();
      });
    });

    $('#username,#password').change(function(){
      $('#submit').attr('value','Login').css('background','#3ea751');
    });
  });

  /**
   * check the login form before user login.
   * @returns {boolean}
   */
  function checkLoginForm(){
    var username = $('#username').val();
    var password = $('#password').val();
    if(isNull(username) && isNull(password)){
      $('#submit').attr('value','请输入账号和密码').css('background','red');
      return false;
    }
    if(isNull(username)){
      $('#submit').attr('value','请输入账号').css('background','red');
      return false;
    }
    if(isNull(password)){
      $('#submit').attr('value','请输入密码').css('background','red');
      return false;
    }
    else{
      $('#submit').attr('value','Logining~');
      return true;
    }
  }
   //注册检测
   /*
   function checkLoggingForm(){
	    var userid = $('#userid').val();
	    var password = $('#password').val();
	    if(isNull(userid) && isNull(password)){
	      $('#submit2').attr('value','请输入账号和密码').css('background','red');
	      return false;
	    }
	    if(isNull(userid)){
	      $('#submit2').attr('value','请输入账号').css('background','red');
	      return false;
	    }
	    if(isNull(password)){
	      $('#submit2').attr('value','请输入密码').css('background','red');
	      return false;
	    }
	    else{
	      $('#submit2').attr('value','请重新登陆~');
	      return true;
	    }
	  }*/


  /**
   * check the param if it's null or '' or undefined
   * @param input
   * @returns {boolean}
   */
  function isNull(input){
    if(input == null || input == '' || input == undefined){
      return true;
    }
    else{
      return false;
    }
  }
</script>
</body>
</html>